<template>
  <div class="content">
    <!--    下推明细列表弹窗-->
    <el-dialog
      v-dialogDrag
      :title="$t('market.pushDetail')"
      model
      :visible.sync="openWarehouse"
      :close-on-click-modal="false"
      width="800px"
      :before-close="handleClose"
      append-to-body
    >
      <div>
        <jc-table
          serial
          :table-data="warehouseData"
          :table-header="warehouseHeader"
          table-height="500px"
        >
          <template v-slot:billSlot="col">
            <el-link type="primary" @click="pushView(col.scope.row.url)">{{ col.scope.row.fbillNo }}</el-link>
          </template>
          <template v-slot:tagSlot="col">
            <el-tag :type="col.scope.row.stateColor">{{ col.scope.row.fdocumentstatus }}</el-tag>
          </template>
        </jc-table>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  queryMtrlDetails, outMtrlDetails,
  queryStockDetails, outStockDetails
} from '@/api/production/productionPicking'
import { toMxBmina } from '@/components/ToMxamineState'

export default {
  props: {
    type: {
      type: String,
      default: '0'
    },
    fid: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      // 下推明细
      openWarehouse: true, // 下推明细弹窗
      warehouseData: [],
      warehouseHeader: [
        { label: this.$t('market.coding'), type: 'bill', prop: 'fbillNo' },
        { label: this.$t('market.receipts'), prop: 'ftypeName' },
        { label: this.$t('market.pushQty'), prop: 'pushQty' },
        { label: this.$t('shop.state'), type: 'tag', prop: 'fdocumentstatus' }
      ]
    }
  },
  created() {
    this.handleWarehouse()
  },
  methods: {
    // 下推明细列表
    async handleWarehouse() {
      if (this.type === '1') { // 生产用料
        const api = queryMtrlDetails
        this.joggle(api)
      } else if (this.type === '2') { // 委外用料
        const api = outMtrlDetails
        this.joggle(api)
      } else if (this.type === '3') { // 生产订单
        const api = queryStockDetails
        this.joggle(api)
      } else if (this.type === '4') { // 委外订单
        const api = outStockDetails
        this.joggle(api)
      }
    },
    joggle(api) {
      api({ fentryId: this.fid }).then(res => {
        if (res.code === 0) {
          this.warehouseData = res.data.map(item => {
            return toMxBmina(item)
          })
        }
      })
    },
    pushView(url) {
      this.$router.push({ path: url })
      this.$emit('client')
    },
    // 关闭前回调
    handleClose() {
      this.$emit('client')
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  @include listBom;
}
</style>
